﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>选择时间和场次</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
    <link rel="stylesheet" th:href="@{/css/weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui2.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui3.css}"/>
    <link rel="stylesheet" th:href="@{/css/mc_common.css}"/>
    <link rel="stylesheet" th:href="@{/css/selectTickets.css}"/>
</head>
<body>
<div data-role="page" class="page" id="selectTickets_page" data-dom-cache="false">
    <div id="tagnav" class="weui-navigator weui-navigator-wrapper">
        <ul class="weui-navigator-list date_item">
            <li th:each="pd : ${play.saleDates}"><a href="javascript:;" class="weui_btn bg-gray-b weui_btn_inline" th:text="${pd}"></a></li>
        </ul>
        <input type="hidden" id="sel_date"/>
    </div>
    <div class="weui_tab" style="height:44px;" id="floor">
        <div class="weui_navbar" style="height:44px;">
            
        </div>
    </div>
    <div class="seat_color">
        
    </div>

    <div id="selectTickets_page_main" data-role="main" class="">
        <div id="showBriefArea" class="eye">
            <div id="showBriefSeats">
                <canvas id="showBriefSeatsCan">Your browser does not support the canvas element</canvas>
            </div>
            <div id="showBriefBorder">

            </div>
        </div>
        <div class="selectTickets_states" align="center">
            <p class="selectTickets_states_g"></p><font class="selectTickets_states_gl">已选</font>
            <p class="selectTickets_states_r"></p><font class="selectTickets_states_rl">已售</font><br/>
            <p style="width:90%;height:2px;position:relative;z-index:0;background:rgb(255,89,37);top:0.5em"></p>
            <p style="position:relative;top:-0.5em;z-index:9;display:inline-block;font-size:0.9em !important;height:1.4em;line-height:1.4em;margin-top:0.3em;width:80%;border-radius:0.7em;background:rgb(255,89,37);color:#F00;text-shadow: 1px 1px 1px #FFF;">
                舞台</p>

        </div>
        <div id="gestureConParent" class="gestureConParent"
             style="width:100%;height:300px;overflow:hidden;white-space: nowrap !important; font-size: 0px !important;">
            <canvas id="gestureCon" class="gestureCon">
                Your browser does not support the canvas element
            </canvas>
        </div>
    </div>
</div>

    <div class="showSelectedTickets">
        <div id="showSelectedTicketsCon">

        </div>
    </div>
    <div class="weui-flex" style="position:fixed;bottom:0;width:100%">
        <!--<div id="ac" class="weui-flex-item order_l_bt" style="max-width: 10%; "><i class="icon icon-35"></i><span class="weui-badge" style="margin-bottom: 15px; ">3</span></div>-->
        <div class="weui-flex-item order_l_bt" style="max-width: 70%; ">应付总金额：<span class="f-red">¥<span
                id="selectTickets_price" class="f-red">0</span></span></div>
        <div class="weui-flex-item" style="max-width: 30%;">
            <a href="javascript:;" id="showSelectedBtn"
                                                               class="weui_btn weui_btn_disabled weui_btn_warn noradius"
                                                               style=" height: 41px; line-height: 41px; overflow: hidden;">确认</a>
        </div>
    </div>
    <!--页面私有引用-->
    <script th:src="@{/js/iscroll.js}"></script>
    <script th:src="@{/js/jquery/jquery-1.7.2.min.js}"></script>
    <script th:src="@{/js/jquery/jquery.md5.js}"></script>
    <script th:src="@{/js/jquery/jquery.mobile.custom.js}"></script>
    <script th:src="@{/js/jquery/mc_common.js}"></script>
    <script th:src="@{/js/jquery/sha1.js}"></script>
    <script th:src="@{/js//jquery/jquery.cookie.js}"></script>
    <script type="text/javascript">

        $(function () {
            //日期横向滚动dd
            TagNav('#tagnav', {type: 'scrollToFirst'});
        });
        //选日期
        $(".date_item li a").on('click', function () {
            $(this).addClass('bg-orange-b').removeClass("bg-gray-b").parent().siblings().children().removeClass('bg-orange-b').addClass('bg-gray-b');
            $("#sel_date").val($(this).text());
        });
        //楼层
        $(".weui_navbar .weui_navbar_item").on('click', function () {
            $(this).addClass('tab-red').siblings().removeClass('tab-red');
        });


    </script>


    <script th:inline="javascript">

        var seatSelect = [];//记录选择的座位
        var seatRowSize = 0;//座位高个数
        var seatColSize = 0;//座位宽个数
        var seatAble = [];


       $(".weui_navbar .weui_navbar_item").first().trigger('click');

        var seatH = 20, seatW = 20;
        var showHide_View;//显示和延时隐藏缩略图
        var winWidth = document.documentElement.clientWidth;
        var recGroupID = [];
        //容器高度
        $("#gestureConParent").height(winWidth * 0.75 + "px");
        //鹰眼高度
        $("#showBriefArea").height(winWidth * 0.75 / 3 + "px");
        $("#showBriefBorder").height(winWidth * 0.75 / 3 + "px");
        var gestureCon = document.getElementById("gestureCon");
        var context = gestureCon.getContext("2d");
        //初始化缩略图
        var briefSeatsCan = document.getElementById("showBriefSeatsCan");
        var briefSeatsCanCon = briefSeatsCan.getContext("2d");

        var seatLocationRecord = 300;
        //$("#selectTickets_page").on("pageshow", function () {
            //initSeatLocation();
        //});
        

         var seats = JSON.parse([[${seat}]]);
         console.log(seats);
        var floors = ['','一楼','二楼','三楼','四楼','五楼'];
        var floorTab = $('.weui_navbar').empty();
        var seatArea = $('.seat_color').empty();
        for (var key in seats) {
            floorTab.append('<div class="weui_navbar_item" data-key="'+key+'">'+floors[seats[key].floor]+'</div>');
        }

        $(".weui_navbar").on('click','.weui_navbar_item', (function(seats){
            return function() {
                var me = $(this);
                me.addClass('tab-red').siblings().removeClass('tab-red');
                var seat = seats[me.data('key')];
                var map = {};
                var sortedAreas =  seat.areaPrices.sort(function(a,b){
                    return a.areaPrice - b.areaPrice;
                });
                seatArea.empty();
                $.each(sortedAreas,function(i,area){
                    if(map[area.areaPrice])return;
                    seatArea.append('<div class="c1" style="background-color:'+area.areaColor+'"></div><p>'+area.areaPrice+'元</p>');
                    map[area.areaPrice] = 1;
                });
                 seatAble = seat.seats;
                 seatRowSize = seat.seatRowSize;//座位高个数
                 seatColSize = seat.seatColSize;//座位宽个数
                 //重新定义画布大小
                    $("#gestureCon").attr("width", seatColSize * (seatW + 2));
                    $("#gestureCon").attr("height", seatRowSize * (seatH + 2));

                    //重新定义缩略图大小
                    $("#showBriefSeatsCan").attr("width", seatColSize * (seatW + 2));
                    $("#showBriefSeatsCan").attr("height", seatRowSize * (seatH + 2));
                initSeatLocation();
            }
        }(seats)));
 $(".weui_navbar .weui_navbar_item").first().trigger('click');

        function initSeatLocation() {

            // 绘制背景
            context.fillStyle = "#F1F1F1";
            context.fillRect(0, 0, gestureCon.width, gestureCon.height);
            // 绘制缩略图背景
            briefSeatsCanCon.fillStyle = "rgb(255,255,255)";
            briefSeatsCanCon.fillRect(0, 0, briefSeatsCanCon.width, briefSeatsCanCon.height);


            var seatImgGray = new Image();
            seatImgGray.src = "/images/seat_big_gray.png";
            var seatImgGreen = new Image();
            seatImgGreen.src = "/images/seat_big_green.png";
            var seatImgWhite = new Image();
            seatImgWhite.src = "/images/seat_big_white.png";
            seatImgWhite.onload = function () {
                //context.drawImage(seatImg,10,10,10,10);
                //绘制格子
                //for(var r = 0;r<seatRowSize;r++){
                //for(var c = 0;c<seatColSize;c++){
                //context.drawImage(seatImgGray,c*(seatW+2),r*(seatH+2),seatW,seatH);
                //context.fillStyle = "rgb(230,230,230)";
                //context.fillRect(c*(seatW+2),r*(seatH+2),seatW,seatH);
                //缩略图
                //briefSeatsCanCon.fillStyle = "rgb(230,230,230)";
                //briefSeatsCanCon.fillRect(c*(seatW+2),r*(seatH+2),seatW,seatH);
                //}
                //}
                var tempRate = winWidth / $("#gestureCon").width();
                //$("#gestureCon").css("width",$("#gestureCon").width()*tempRate+"px");
                //$("#gestureCon").css("height",$("#gestureCon").height()*tempRate+"px");
                //绘制有效座位
                //seatLocationRecord = $("#gestureCon").width();
                //console.log("seatAble:",JSON.stringify(seatAble));
                for (var idx in seatAble) {

                    var seatSizeRow = seatAble[idx].maxRow - seatAble[idx].minRow + 1;
                    var seatSizeCol = seatAble[idx].maxCol - seatAble[idx].minCol + 1;
                    /* 	console.log(seatAble[idx].cellBg);
                     console.log(seatAble[idx].seatValid); */
                    if (seatAble[idx].seatValid == 0) {
                        console.log("seatName:" + seatAble[idx].seatName + "&&&&&&");
                        context.font = "14px Arial";
                        var seatNameRoad = seatAble[idx].seatName;
                        if (seatNameRoad.length > 1) {
                            context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 8, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);
                        } else {
                            if (isNaN(seatNameRoad)) {
                                context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 8, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);
                            } else {
                                context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 3, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);

                            }
                        }

                        continue;
                    }
                    if (seatSizeRow == 1 && seatSizeCol == 1) {
                        //console.log("seatIsSale:",seatAble[idx].seatIsSale);
                        if (seatAble[idx].seatIsSale == 0) {
                            context.fillStyle = "#" + seatAble[idx].cellBg;
                            context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                            briefSeatsCanCon.fillStyle = "#" + seatAble[idx].cellBg;
                            briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);

                            context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                            briefSeatsCanCon.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                        } else {
                            context.fillStyle = "#444";
                            context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                            briefSeatsCanCon.fillStyle = "#444";
                            briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);

                            context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                            briefSeatsCanCon.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                        }
                    } else {

                        if (recGroupID.indexOf(seatAble[idx].seatGroupID) > -1) {
                            continue;
                        } else {
                            recGroupID.push(seatAble[idx].seatGroupID);
                        }

                        if (seatAble[idx].seatIsSale == 0) {
                            context.fillStyle = "#" + seatAble[idx].cellBg;
                            context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                            briefSeatsCanCon.fillStyle = "#" + seatAble[idx].cellBg;
                            briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);
                        } else {
                            context.fillStyle = "#444";
                            context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                            briefSeatsCanCon.fillStyle = "#444";
                            briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                        }
                    }
                }
                $("#gestureCon").css("width", "100%");
                //$("#selectTickets_price").html(0);

                dealbriefSeatsCan();
                gestureClickEventInit();
                //点击按钮发送请求
                $("#showSelectedBtn").on("click", function () {
                    var me = $(this);
                    if(me.text() !== '确认'){
                        return;
                    }
                    var playDate = $(".date_item .weui-state-active");
                    if (playDate.lenght === 0) {
                        CommonFun.popMsg("selectTickets_page", "请选择观影日期");
                        return;
                    }
                    if (seatSelect.length === 0) {
                         CommonFun.popMsg("selectTickets_page", "请选择座位");
                         return;
                    }
                    var floorTab = $("#floor .tab-red");
                    if(floorTab.length == 0){
                        CommonFun.popMsg("selectTickets_page", "请选择楼层");
                         return;
                    }
                    var floor = seats[floorTab.data('key')].floor;
                    var selectedSeats = [];
                    for (var idx in seatSelect) {
                        selectedSeats.push({name:seatSelect[idx].seatName,seatId:seatSelect[idx].seatDefId,price:seatSelect[idx].seatPrice,floor:floor});
                    }
                    me.text('确认中..');
                    var params = {};
                    params.playId = [[${play.id}]];
                    params.playDate = playDate.text();
                    params.seats = selectedSeats;
                    params.userId = [[${userId}]];
                    $.ajax({  
                        type: "POST",  
                        url: "/wechat/precheck",  
                        data: JSON.stringify(params),
                        dataType:"json",  
                        contentType : 'application/json;charset=utf-8', 
                        complete : function(XHR, TS){
                            var response = {code : -1,msg:'system error'};
                            try{
                                response = JSON.parse(XHR.responseText);
                            }catch(e){;}
                            if(response.code === 0){
                                location.href = "/wechat/order/" + response.data;
                            }else{
                                me.text('确认');
                                CommonFun.popMsg("selectTickets_page", response.msg);
                            }
                        }
                    });
                });
            }
            //处理缩略图位置
            function dealbriefSeatsCan() {
                if ($("#showBriefSeatsCan").width() / parseInt($("#showBriefSeatsCan").height()) >= 4 / 3) {
                    $("#showBriefSeatsCan").css("width", "100%");
                    //alert(1);
                } else {
                    //alert($("#showBriefSeatsCan").css("width"));
                    $("#showBriefSeatsCan").css("height", "100%");
                }
                showHide_View = setTimeout(function () {
                    $("#showBriefArea").css("display", "none");
                }, 3000);
            }

            function gestureClickEventInit() {
                gestureCon.removeEventListener("click", gestureClickEvent, false);
                //添加事件响应
                gestureCon.addEventListener('click', gestureClickEvent, false);
            }

            function gestureClickEvent(e) {
                var p = getEventPosition(e);
                // alert(JSON.stringify(p));
                //reDraw(p,context);

                var tempRate = parseInt($("#gestureCon").css("width")) / seatLocationRecord;

                var clickCol = Math.floor(p.x / ((seatW + 2) * tempRate));
                var clickRow = Math.floor(p.y / ((seatH + 2) * tempRate));
                //$("#showMsg123").html(clickCol+":"+clickRow);

                for (var idx in seatAble) {

                    if (seatAble[idx].minRow - 1 <= clickRow && (seatAble[idx].minCol - 1 <= clickCol) && seatAble[idx].maxRow - 1 >= clickRow && seatAble[idx].maxCol - 1 >= clickCol) {
                        if (seatAble[idx].seatValid == 0) {
                            return;
                        }
                        if (seatAble[idx].seatIsSale != 0) {
                            CommonFun.popMsg("selectTickets_page", "该座位已经被占用啦");
                            return;
                        }

                        var seatExitFlag = false;
                        var seatExitIdx = 0;
                        for (var m in seatSelect) {
                            if (seatSelect[m].minRow - 1 <= clickRow && (seatSelect[m].minCol - 1 <= clickCol) && seatSelect[m].maxRow - 1 >= clickRow && seatSelect[m].maxCol - 1 >= clickCol) {
                                seatExitFlag = true;
                                seatExitIdx = m;
                            }
                        }
                        console.log(seatExitFlag);
                        var seatSizeRow = seatAble[idx].maxRow - seatAble[idx].minRow + 1;
                        var seatSizeCol = seatAble[idx].maxCol - seatAble[idx].minCol + 1;

                        if (seatExitFlag) {
                            console.log("seatAble[idx].cellBg:::::" + seatAble[idx].cellBg);
                            context.fillStyle = "#" + seatAble[idx].cellBg;
                            console.log(seatAble[idx]);
                            context.fillRect(clickCol * (seatW + 2), clickRow * (seatH + 2), seatW, seatH);
                            seatSelect.splice(seatExitIdx, 1);
                            if (seatSizeRow == 1 && seatSizeCol == 1) {
                                context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeRow - 2), ((seatH + 2) * seatSizeCol - 2));
                            } else {
                                context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeCol - 2), ((seatH + 2) * seatSizeRow - 2));
                            }
                        } else {
                            if (seatSelect.length >= 6) {
                                CommonFun.popMsg("selectTickets_page", "亲，最多选取六个座位");
                                return;
                            }
                            context.fillStyle = "rgb(0,230,0)";
                            context.fillRect(clickCol * (seatW + 2), clickRow * (seatH + 2), seatW, seatH);
                            seatSelect.push(seatAble[idx]);
                            if (seatSizeRow == 1 && seatSizeCol == 1) {
                                context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeRow - 2), ((seatH + 2) * seatSizeCol - 2));
                            } else {
                                context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeCol - 2), ((seatH + 2) * seatSizeRow - 2));
                            }

                        }
                        showSelectTicketList();
                        if (seatAble[idx].seatGroupID != '0') {
                            break;
                        }
                    }
                }

            }

            //显示选中的座位
            function showSelectTicketList() {
                //<div class="showSelectedTicketsItem">5排2座</div>
                $("#showSelectedTicketsCon").empty();
                var countPrice = 0;
                if (seatSelect.length > 0) {
                    $("#showSelectedBtn").removeClass("weui_btn_disabled");
                } else {
                    $("#showSelectedBtn").addClass("weui_btn_disabled");
                }
                for (var idx in seatSelect) {
                    $("#showSelectedTicketsCon").append($('<div class="showSelectedTicketsItem">' + seatSelect[idx].seatName + '</div>'));
                    countPrice += parseInt(seatSelect[idx].seatPrice);
                }
                $("#selectTickets_price").html(countPrice);
            }

            //得到点击的坐标
            function getEventPosition(ev) {
                var x, y;
                if (ev.layerX || ev.layerX == 0) {
                    x = ev.layerX;
                    y = ev.layerY;
                } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                    x = ev.offsetX;
                    y = ev.offsetY;
                }
                return {x: x, y: y};
            }

            el = gestureCon;
            var point1_X;
            var point1_Y;
            var point2_X;
            var point2_Y;//放大缩小的坐标
            var point1_S_X, point1_S_Y, point2_S_X, point2_S_Y;
            var startDistance, currentDistance;

            el.addEventListener('touchstart', function (event) {
                var fingers = event.touches.length;

                if (fingers == 1) {
                    point1_X = event.touches[0].pageX;
                    point1_Y = event.touches[0].pageY;
                } else if (fingers == 2) {
                    point1_S_X = event.touches[0].pageX;
                    point1_S_Y = event.touches[0].pageY;
                    point2_S_X = event.touches[1].pageX;
                    point2_S_Y = event.touches[1].pageY;
                    startDistance = Math.sqrt((point1_S_X - point2_S_X) * (point1_S_X - point2_S_X) + (point1_S_Y - point2_S_Y) * (point1_S_Y - point2_S_Y));
                }
                //event.stopPropagation();
                //event.preventDefault();
            });

            el.addEventListener('touchmove', function (event) {
                var fingers = event.touches.length;
                if (fingers == 1) {
                    var point1_X_M = event.touches[0].pageX;
                    var point1_Y_M = event.touches[0].pageY;
                    var distance_X = point1_X_M - point1_X;
                    var distance_Y = point1_Y_M - point1_Y;
                    //$("#ShowMsg123").html(distance_X);
                    $("#gestureCon").css({
                        "left": parseInt($("#gestureCon").css("left")) + distance_X + "px",
                        "top": parseInt($("#gestureCon").css("top")) + distance_Y + "px"
                    });
                    point1_X = point1_X_M;
                    point1_Y = point1_Y_M;
                } else if (fingers == 2) {
                    //缩放是最新坐标
                    point1_X = event.touches[0].pageX;
                    point1_Y = event.touches[0].pageY;
                    point2_X = event.touches[1].pageX;
                    point2_Y = event.touches[1].pageY;

                    currentDistance = Math.sqrt((point1_X - point2_X) * (point1_X - point2_X) + (point1_Y - point2_Y) * (point1_Y - point2_Y)) / (Math.sqrt((point1_S_X - point2_S_X) * (point1_S_X - point2_S_X) + (point1_S_Y - point2_S_Y) * (point1_S_Y - point2_S_Y)));

                    if ($(el).width() <= winWidth && currentDistance <= 1) {
                        var tempRateInner = winWidth / $(el).width();
                        $(el).css("width", $(el).width() * tempRateInner + "px");
                        //$(el).css("height",$(el).height()*tempRateInner+"px");
                    } else if ($(el).width() >= winWidth * 8 && currentDistance >= 1) {
                        $(el).css("width", winWidth * 8 + "px");
                    } else {
                        $(el).css("width", $(el).width() * currentDistance + "px");
                        //$(el).css("height",$(el).height()*currentDistance+"px");
                    }
                    //$("#showMsg123").html($(el).width()+currentDistance+"px");
                    point1_S_X = point1_X;
                    point1_S_Y = point1_Y;
                    point2_S_X = point2_X;
                    point2_S_Y = point2_Y;
                    gestureClickEventInit();
                }
                //左移动不过界
                if (Math.abs(parseInt($("#gestureCon").css("left"))) >= Math.abs((parseInt($("#gestureCon").css("width")) - winWidth))) {
                    $("#gestureCon").css({"left": winWidth - parseInt($("#gestureCon").css("width")) + "px"});
                }
                //上移动不过界
                if (Math.abs(parseInt($("#gestureCon").css("top"))) >= Math.abs(parseInt($("#gestureCon").css("height"))) - parseInt($("#gestureCon").parent().css("height"))) {
                    $("#gestureCon").css({"top": (parseInt($("#gestureCon").parent().css("height")) - parseInt($("#gestureCon").css("height"))) + "px"});
                }
                //右移动不过界
                if (parseInt($("#gestureCon").css("left")) >= 0) {
                    $("#gestureCon").css({"left": "0px"});
                }
                //下移动不过界
                if (parseInt($("#gestureCon").css("top")) >= 0) {
                    $("#gestureCon").css({"top": "0px"});
                }
                var tempViewLeft = parseInt($("#gestureCon").css("left"));
                var tempViewTop = parseInt($("#gestureCon").css("top"));
                var tempViewWidth = parseInt($("#gestureCon").css("width"));
                var tempViewHeight = parseInt($("#gestureCon").css("height"));


                var tempViewRate = winWidth / parseInt($("#gestureCon").css("width"));
                var tempViewRateH = winWidth / parseInt($("#gestureCon").css("width"));
                //缩略图框
                $("#showBriefBorder").css({
                    "left": -tempViewLeft * tempViewRate / 3 + "px",
                    "top": -tempViewTop * tempViewRate / 3 + "px",
                    "width": parseInt($("#showBriefSeats").css("width")) * tempViewRate - 1 + "px",
                    "height": parseInt($("#showBriefSeats").css("height")) * tempViewRate - 1 + "px"
                });
                //显示和延时隐藏
                $("#showBriefArea").css("display", "block");
                clearTimeout(showHide_View);
                showHide_View = setTimeout(function () {
                    $("#showBriefArea").css("display", "none");
                }, 3000);
                //event.stopPropagation();
                event.preventDefault();
            });

            el.addEventListener('touchend', function (event) {
                var fingers2 = event.touches.length;
                //event.stopPropagation();
                //event.preventDefault();
            });
        }
    </script>

</body>
</html>
